<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no, user-scalable=no">
		<script>
			var designW = 750,
				designH = 1346;
			var windowW = window.innerWidth,
				windowH = window.innerHeight;
			var scaleX = windowW / designW,
				scaleY = windowH / designH;
			var scale = Math.min(scaleX, scaleY);
			// var htmlEle = document.querySelector('html');
			// htmlEle.style.transform = 'scale(' + scale + ')';
			var metaTags = document.getElementsByTagName('meta');
			for (var i = 0; i < metaTags.length; i++) {
				// 判断当前元素是否为 viewport 相关的 meta 标签
				if (metaTags[i].getAttribute("name") === "viewport") {
					// 设置新的 initial-scale 值
					metaTags[i].setAttribute(
						"content",
						"width=device-width, shrink-to-fit=no, user-scalable=no, initial-scale=" + scale
					);
					break; // 只需修改第一个符合条件的 meta 标签，因此跳出循环
				}
			}
		</script>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="renderer" content="webkit">
		<title>订单</title>
		<meta name="description" content="订单" />
		<meta name="keywords" content="" />
		<link rel="stylesheet" href="./picker.css">
		<style>
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			body {
				padding: 0 0;
				font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
				user-select: none;
				-webkit-user-select: none;
				display: flex;
				flex-direction: column;
				align-items: center;
				background: #F6F6F6;
			}

			.mainBox {
				padding: 10px 0;
				width: 100%;
				max-width: 750px;
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.mainBox .orderBox {
				margin: 10px 20px;
				width: 710px;
				background: #FFFFFF;
				box-shadow: 0px 0px 6px 0px #EAEAEA;
				border-radius: 24px;
				display: flex;
				flex-direction: column;
			}

			.mainBox .orderBox .noRow {
				width: 100%;
				height: 76px;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
			}

			.mainBox .orderBox .noRow .no {
				padding-left: 28px;
				font-weight: 400;
				font-size: 24px;
				color: #4A5561;
			}

			.mainBox .orderBox .noRow .status {
				padding-right: 28px;
				font-weight: 400;
				font-size: 24px;
				color: #4A5561;
			}

			.mainBox .orderBox .addrRow {
				margin: 0 28px;
				width: calc(100% - 56px);
				padding: 28px;
				background: #F3F3F5;
				border-radius: 8px;
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.mainBox .orderBox .addrRow .addrOne {
				width: 100%;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
			}

			.mainBox .orderBox .addrRow .addrOne .name {
				font-weight: 400;
				font-size: 28px;
				color: #1A1B30;
			}

			.mainBox .orderBox .addrRow .addrOne .arrow {
				font-weight: 500;
				font-size: 24px;
				color: #5696D8;
			}

			.mainBox .orderBox .addrRow .addrTwo {
				width: 100%;
				font-weight: 400;
				font-size: 24px;
				color: #4A5561;
			}

			.mainBox .orderBox .proRow {
				margin: 16px 28px;
				width: calc(100% - 56px);
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
			}

			.mainBox .orderBox .proRow .proLeft {
				width: 184px;
				height: 184px;
				border-radius: 8px;
				overflow: hidden;
			}

			.mainBox .orderBox .proRow .proLeft img {
				width: 100%;
				height: 100%;
			}

			.mainBox .orderBox .proRow .proRight {
				width: calc(100% - 184px);
				padding-left: 16px;
				display: flex;
				flex-direction: column;
			}

			.mainBox .orderBox .proRow .proRight .proName {
				width: 100%;
				font-weight: bold;
				font-size: 32px;
				color: #0B2238;
				line-height: 48px;
			}

			.mainBox .orderBox .proRow .proRight .proTip {
				width: 100%;
				font-weight: 400;
				font-size: 24px;
				color: #2B87DC;
				line-height: 36px;
			}

			.mainBox .orderBox .proRow .proRight .proSku {
				margin-top: 24px;
				width: 100%;
				font-weight: 400;
				font-size: 24px;
				color: #929292;
				line-height: 36px;
			}

			.mainBox .orderBox .proRow .proRight .proPrice {
				width: 100%;
				font-weight: 400;
				font-size: 24px;
				color: #0C0C0C;
				display: flex;
				flex-direction: row;
				align-items: baseline;
			}

			.mainBox .orderBox .proRow .proRight .proPrice div {
				margin-right: 10px;
				font-weight: bold;
				font-size: 28px;
				color: #F03E10;
			}

			.mainBox .orderBox .proRow .proRight .proPrice div span {
				font-weight: bold;
				font-size: 36px;
				color: #F03E10;
			}

			.mainBox .orderBox .lineRow {
				margin-top: 16px;
				width: 100%;
				height: 2px;
				background: #F3F3F5;
			}

			.mainBox .orderBox .btnRow {
				margin: 0 28px;
				width: calc(100% - 56px);
				height: 100px;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
			}

			.mainBox .orderBox .btnRow .btnLeft {
				font-weight: 400;
				font-size: 28px;
				color: #0C122D;
			}

			.mainBox .orderBox .btnRow .btnLeft span {
				font-weight: bold;
				color: #ED3119;
			}

			.mainBox .orderBox .btnRow .btns {
				display: flex;
				flex-direction: row;
			}

			.mainBox .orderBox .btnRow .btns button {
				width: 180px;
				height: 64px;
				background: #333;
				border-radius: 32px;
				border: none;
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: 400;
				font-size: 28px;
				color: #FFFFFF;
			}

			.mainBox .orderBox .btnRow .btns .cancelBtn {
				background: linear-gradient(90deg, #B6BECD 0%, #98AACB 100%);
			}

			.mainBox .orderBox .btnRow .btns .payBtn {
				background: linear-gradient(90deg, #24B1FC 0%, #178DF4 100%);
			}

			.mainBox .orderBox .btnRow .btns .tuikuanDiv {
				font-weight: 500;
				font-size: 24px;
				color: #646464;
			}

			.mainBox .orderBox .btnRow .btns .wuliuDiv {
				font-weight: 500;
				font-size: 24px;
				color: #646464;
			}

			.mainBox .orderBox .btnRow .btns .wuliuDiv span {
				color: #188EF5;
			}


			.addr-mask {
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: rgba(0, 0, 0, 0.5);
				z-index: 899;
				opacity: 0;
				pointer-events: none;
				transition: opacity 0.3s ease;
			}

			.addr-mask.show {
				opacity: 1;
				pointer-events: auto;
			}

			.addr-container {
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
				background: #fff;
				border-radius: 16px 16px 0 0;
				box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.1);
				transform: translateY(100%);
				transition: transform 0.3s ease;
				z-index: 900;
			}

			.addr-container.show {
				transform: translateY(0);
			}

			.addr-header {
				display: flex;
				flex-direction: row;
				justify-content: center;
				padding: 20px;
				border-bottom: 1px solid #eee;
			}

			.addr-title {
				padding-left: 80px;
				width: calc(100% - 80px);
				font-weight: 500;
				font-size: 26px;
				line-height: 40px;
				text-align: center;
			}

			.addr-close {
				width: 80px;
				height: 40px;
				background: none;
				border: none;
				font-size: 60px;
				color: #FD5F00;
				line-height: 40px;
				text-align: center;
			}

			.addr-content {
				display: flex;
				height: max-content;
				overflow: hidden;
			}

			.addr-content .addrBox {
				padding: 20px 40px;
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.addr-content .addrBox .addrRow {
				padding: 12px 0;
				width: 100%;
				height: 86px;
				border-bottom: 1px solid #F0F0F0;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
			}

			.addr-content .addrBox .addrRow:nth-child(5) {
				border-bottom: none;
			}

			.addr-content .addrBox .addrRow .rowName {
				width: 128px;
				font-weight: 400;
				font-size: 24px;
				color: #545458;
				line-height: 2;
			}

			.addr-content .addrBox .addrRow .rowInput {
				width: calc(100% - 128px);
				position: relative;
			}

			.addr-content .addrBox .addrRow .rowInput>input,
			.addr-content .addrBox .addrRow .rowInput>.select-btn>input {
				padding: 0 10px;
				width: calc(100% - 20px);
				border: none;
				font-weight: 400;
				font-size: 24px;
				line-height: 2;
			}

			.addr-content .addrBox .addrRow .rowInput>input:focus,
			.addr-content .addrBox .addrRow .rowInput>input:active,
			.addr-content .addrBox .addrRow .rowInput>.select-btn>input:focus,
			.addr-content .addrBox .addrRow .rowInput>.select-btn>input:active {
				border: none;
			}

			.addr-content .addrBox .addrRow .rowInput>.select-btn {
				border: none;
				padding: 0;
				width: 100%;
				height: 100%;
				border: none;
			}

			.addr-content .addrBox .addrRow .rowInput>.select-btn::after {
				width: 12px;
				height: 12px;
				top: 16px;
			}

			.addr-content .addrBox .applyBtn {
				margin: 28px 0 36px 0;
			}

			.addr-content .addrBox .applyBtn .button {
				width: 710px;
				height: 96px;
				background: linear-gradient(90deg, #FD5F00 0%, #FF371B 100%);
				border-radius: 36px;
				border: none;
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: bold;
				font-size: 36px;
				color: #FFFFFF;
			}
		</style>
	</head>
	<body>
		<div class="mainBox" id="app">
			<div class="orderBox" v-for="item in orderList" :key="item.id">
				<div class="noRow">
					<div class="no">订单号: {{item.order_no}}</div>
					<div class="status">{{['待支付','已支付','已发货','已签收','已退款','已失效','已激活','退款中'][item.status]}}</div>
				</div>
				<div class="addrRow">
					<div class="addrOne">
						<div class="name">{{item.realname}} {{item.tel}}</div>
						<div v-if="item.status==0||item.status==1" class="arrow showChangeAddr" id="showChangeAddr"
							:data-itemid="item.id">修改〉</div>
					</div>
					<div class="addrTwo">{{item.address}}</div>
				</div>
				<div class="proRow" v-if="item.product&&item.product.id">
					<div class="proLeft">
						<img :src="item.product.thumb_image" width="100%" height="100%" alt="" />
					</div>
					<div class="proRight">
						<div class="proName">{{item.product.product_name}}</div>
						<div class="proTip">适用室内、户外各种灵活联网需求</div>
						<div class="proSku">颜色：随机</div>
						<div class="proPrice">
							<div>包年<span>{{item.product.sales_price}}</span>元</div> 月享1500G
						</div>
					</div>
				</div>
				<div class="lineRow"></div>
				<div class="btnRow">
					<div class="btnLeft" v-if="item.status==0">需支付<span>{{item.product.sales_price}}</span>元</div>
					<div class="btnLeft" v-else-if="item.status==5">已失效</div>
					<div class="btnLeft" v-else-if="item.status==7">已退款</div>
					<div class="btnLeft" v-else>已支付<span>{{item.product.sales_price}}</span>元</div>
					<div class="btns">
						<button class="cancelBtn" id="cancelBtn" :data-itemid="item.id" v-if="item.status==1">取消订单</button>
						<button class="payBtn" id="payBtn" :data-itemid="item.id" v-if="item.status==0">立即支付</button>
						<div class="wuliuDiv" :data-expressno="item.express_no" v-if="item.status==2||item.status==3">
							{{item.express_name}} {{item.express_no}}
							<span>复制</span>
						</div>
						<div class="tuikuanDiv" v-if="item.status==7">退款已按原路退回，请注意查收</div>
					</div>
				</div>
			</div>
		</div>

		<div class="addr-mask" id="addrMask"></div>
		<div class="addr-container" id="addrContainer">
			<div class="addr-header">
				<div class="addr-title">修改地址</div>
				<button class="addr-close" id="addrClose">&times;</button>
			</div>
			<div class="addr-content" id="addrContent">
				<div class="addrBox">
					<div class="addrRow">
						<div class="rowName">收件人:</div>
						<div class="rowInput">
							<input id="username" type="text" placeholder="请输入收件人" autoComplete="false">
						</div>
					</div>
					<div class="addrRow">
						<div class="rowName">联系方式:</div>
						<div class="rowInput">
							<input id="phone" type="tel" placeholder="请输入联系方式" autoComplete="false">
						</div>
					</div>
					<div class="addrRow">
						<div class="rowName">所在地区:</div>
						<div class="rowInput">
							<div id="selectBtn" class="select-btn">
								<input id="cityPicker" type='text' placeholder='请选择省市区' readonly />
							</div>
						</div>
					</div>
					<div class="addrRow">
						<div class="rowName">详细地址:</div>
						<div class="rowInput">
							<input id="address" type="text" placeholder="请输入详细地址" autoComplete="false">
						</div>
					</div>
					<div class="applyBtn">
						<button type="button" class="button" id="onChangeAddr">
							确认修改
						</button>
					</div>
				</div>

			</div>
		</div>

		<div class="picker-mask" id="pickerMask"></div>
		<div class="picker-container" id="pickerContainer">
			<div class="picker-header">
				<div class="picker-title">选择省市区</div>
				<button class="picker-close" id="pickerClose">完成</button>
			</div>
			<div class="picker-content" id="pickerContent"></div>
		</div>

		<script src="https://code.jquery.com/jquery-1.12.4.min.js"> </script>
		<script src="vue@v2.7.16.js"></script>
		<script src="cities.js"></script>
		<script src="picker.js"></script>
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data: {
					orderList: {},
					activeId: '',
					activeOrder: {},
				},
				methods: {
					initOrderList: function() {
						const self = this;
						$.ajax({
							url: "https://wkh.wokahui.cn/api/ad/get_order?openid=o8l756P0U3LGRNYP8tQdrBCdWECY",
							type: "GET",
							dataType: "json",
							timeout: 6000,
							beforeSend: function(xhr) {
								// 可选，发送请求前执行（如添加请求头、显示加载动画）
								console.log("准备发送请求...");
							},
							success: function(response) {
								// 必需，请求成功时执行（response 是服务器返回的数据）
								console.log("请求成功：", response);
								if (response.code == 0 && response.data && response.data.length) {
									self.orderList = response.data;
								} else {
									layer.msg(response.msg || "查询订单出错", {
										title: '温馨提示',
										time: 1500
									})
								}
							},
							error: function(xhr, status, error) {
								// 可选，请求失败时执行（如网络错误、服务器错误）
								console.log("请求失败：", status, error);
							},
							complete: function(xhr, status) {
								// 可选，请求完成后执行（无论成功或失败，如隐藏加载动画）
								console.log("请求结束");
							}
						});
					}
				}
			});

			let username, phone, city, adderess;
			$(document).ready(function() {
				app.initOrderList();
				document.addEventListener('click', function(e) {
					if (e.target.classList.contains('wuliuDiv')) {
						const itemExpressno = e.target.dataset.expressno;
						console.log('点击的元素-wuliuDiv:', itemExpressno);
						copyTextToClipboard(itemExpressno);
					}
					if (e.target.classList.contains('cancelBtn')) {
						const itemId = e.target.dataset.itemid;
						console.log('点击的元素-cancelBtn:', itemId);
						cancelOrder(itemId);
					}
					if (e.target.classList.contains('payBtn')) {
						const itemId = e.target.dataset.itemid;
						console.log('点击的元素-payBtn:', itemId);
						payOrder(itemId);
					}
					if (e.target.classList.contains('showChangeAddr')) {
						const itemId = e.target.dataset.itemid;
						console.log('点击的元素-showChangeAddr:', itemId);
						showChangeAddr(itemId);
						for (let i = 0; i < app.orderList.length; i++) {
							if (app.activeId == app.orderList[i].id) {
								app.activeOrder = app.orderList[i];
							}
						}
						setTimeout(() => {
							document.getElementById("username").value = app.activeOrder.realname || '';
							document.getElementById("phone").value = app.activeOrder.tel || '';
							document.getElementById("cityPicker").value =
								`${app.activeOrder.province || ''}${app.activeOrder.city || ''}${app.activeOrder.county || ''}`;
							document.getElementById("address").value = app.activeOrder.address || '';
						});
					}
				});
				// $("#changeAddr").click(function() {
				// 	console.log('changeAddr = ', e);
				// 	addrMask.classList.add('show');
				// 	addrContainer.classList.add('show');
				// 	$("html").css("overscroll-behavior", "none");
				// });
				const addrClose = document.getElementById('addrClose');
				addrClose.addEventListener('click', hideAddr);
				$("#onChangeAddr").click(function() {
					console.log('changeAddr = ');
					onChangeAddr();
				});

			});

			function payOrder(id) {
				console.log('payOrder：', id);
				app.activeId = id;
				//调起支付
				const self = this;
				$.ajax({
					url: "https: //wkh.wokahui.cn/api/ad/pay_order",
					type: "POST",
					dataType: "json",
					data: {
						id: app.activeId,
						openid: 'o8l756P0U3LGRNYP8tQdrBCdWECY'
					},
					timeout: 6000,
					beforeSend: function(xhr) {
						// 可选，发送请求前执行（如添加请求头、显示加载动画）
						console.log("准备发送请求...");
					},
					success: function(response) {
						// 必需，请求成功时执行（response 是服务器返回的数据）
						console.log("请求成功：", response);
						if (response.code == 0) {
							callpay(res.data);
						} else {
							layer.msg(response.msg || "下单出错", {
								title: '温馨提示',
								time: 1500
							})
						}
					},
					error: function(xhr, status, error) {
						// 可选，请求失败时执行（如网络错误、服务器错误）
						console.log("请求失败：", status, error);
					},
					complete: function(xhr, status) {
						// 可选，请求完成后执行（无论成功或失败，如隐藏加载动画）
						console.log("请求结束");
					}
				});
			}

			function jsApiCall(data) {
				WeixinJSBridge.invoke(
					'getBrandWCPayRequest', {
						"appId": data.appId, //公众号名称，由商户传入
						"timeStamp": data.timeStamp, //时间戳，自1970年以来的秒数
						"nonceStr": data.nonceStr, //随机串
						"package": data.package,
						"signType": data.signType, //微信签名方式：
						"paySign": data.paySign //微信签名
					},
					function(res) {
						console.log(res);
						if (res.err_msg == "get_brand_wcpay_request:ok") {
							// 使用以上方式判断前端返回,微信团队郑重提示：
							//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
							window.location.href = './complete?phone=' + phone_number
						} else {}

					}
				);
			}

			function callpay(data) {
				if (typeof WeixinJSBridge == "undefined") {
					if (document.addEventListener) {
						document.addEventListener('WeixinJSBridgeReady', jsApiCall(), false);
					} else if (document.attachEvent) {
						document.attachEvent('WeixinJSBridgeReady', jsApiCall());
						document.attachEvent('onWeixinJSBridgeReady', jsApiCall());
					}
				} else {
					jsApiCall(data);
				}
			}

			function cancelOrder(id) {
				console.log('cancelOrder：', id);
				app.activeId = id;
				$.ajax({
					url: "https: //wkh.wokahui.cn/api/ad/cancel_order",
					type: "POST",
					dataType: "json",
					data: {
						id: app.activeId,
					},
					timeout: 6000,
					beforeSend: function(xhr) {
						// 可选，发送请求前执行（如添加请求头、显示加载动画）
						console.log("准备发送请求...");
					},
					success: function(response) {
						// 必需，请求成功时执行（response 是服务器返回的数据）
						console.log("请求成功：", response);
						if (response.code == 0) {
							location.replace("file:///D:/ZhangKui/projects/high_flow_cards/pages/web/wopaika/order.html")
						} else {
							layer.msg(response.msg || "取消订单出错", {
								title: '温馨提示',
								time: 1500
							})
						}
					},
					error: function(xhr, status, error) {
						// 可选，请求失败时执行（如网络错误、服务器错误）
						console.log("请求失败：", status, error);
					},
					complete: function(xhr, status) {
						// 可选，请求完成后执行（无论成功或失败，如隐藏加载动画）
						console.log("请求结束");
					}
				});

			}

			function showChangeAddr(id) {
				console.log('showChangeAddr：', id);
				app.activeId = id;
				addrMask.classList.add('show');
				addrContainer.classList.add('show');
				$("html").css("overscroll-behavior", "none");
			}

			function onChangeAddr() {
				console.log('onChangeAddr:', app.activeId);
				username = document.getElementById("username").value;
				phone = document.getElementById("phone").value;
				city = document.getElementById("cityPicker").value;
				address = document.getElementById("address").value;
				console.log(username, phone, city, address);
				if (!username) {
					layer.msg('请输入收件人!', {
						title: '温馨提示',
						time: 1500
					})
					return;
				}
				if (!phone) {
					layer.msg('请输入联系方式!', {
						title: '温馨提示',
						time: 1500
					})
					return;
				}
				const regex = /^1[3-9]\d{9}$/; // 中国大陆手机号码的正则表达式
				if (!regex.test(phone)) {
					layer.msg('请检查联系方式!', {
						title: '温馨提示',
						time: 1500
					})
					return;
				}
				if (!city) {
					layer.msg('请输入省市区!', {
						title: '温馨提示',
						time: 1500
					})
					return;
				}
				if (!address) {
					layer.msg('请输入详细地址!', {
						title: '温馨提示',
						time: 1500
					})
					return;
				}
				const self = this;
				$.ajax({
					url: "https://wkh.wokahui.cn/api/ad/edit_order",
					type: "POST",
					dataType: "json",
					data: {
						id: app.activeId,
						realname: username,
						tel: phone,
						address: `${city}${address}`,
					},
					timeout: 6000,
					beforeSend: function(xhr) {
						// 可选，发送请求前执行（如添加请求头、显示加载动画）
						console.log("准备发送请求...");
					},
					success: function(response) {
						// 必需，请求成功时执行（response 是服务器返回的数据）
						console.log("请求成功：", response);
						if (response.code == 0) {
							hideAddr();
							location.replace("file:///D:/ZhangKui/projects/high_flow_cards/pages/web/wopaika/order.html")
						} else {
							layer.msg(response.msg || "查询产品出错", {
								title: '温馨提示',
								time: 1500
							})
						}
					},
					error: function(xhr, status, error) {
						// 可选，请求失败时执行（如网络错误、服务器错误）
						console.log("请求失败：", status, error);
					},
					complete: function(xhr, status) {
						// 可选，请求完成后执行（无论成功或失败，如隐藏加载动画）
						console.log("请求结束");
					}
				});
			}

			function hideAddr() {
				addrMask.classList.remove('show');
				addrContainer.classList.remove('show');
				$("html").css("overscroll-behavior", "auto");
			}

			async function copyTextToClipboard(copyText) {
				try {
					await navigator.clipboard.writeText(copyText);
					console.log('Text copied to clipboard：', copyText);
					document.getElementById("copyText").innerText = '已复制';
				} catch (err) {
					console.error('Could not copy text: ', err);
				}
			}
		</script>

	</body>
</html>